<template>
  <div @click="$router.push('/testdetails/' + postData.id)">
    <div class="singleImg" v-if="postData.type === 1 && postData.cover.length >= 1 && postData.cover.length < 3">
      <div class="left">
        <div class="title">{{ postData.title }}</div>
        <div class="info">
          {{ postData.user.nickname }}
          {{ postData.comment_length }}跟帖
        </div>
      </div>
      <img :src="postData.cover[0].url" class="right" />
    </div>
    <div class="multiImg" v-if="postData.type === 1 && postData.cover.length >= 1 && postData.cover.length >= 3">
      <div class="left">
        <div class="title">{{ postData.title }}</div>
      </div>
      <div class="imgs">
        <img :src="postData.cover[0].url" />
        <img :src="postData.cover[1].url" />
        <img :src="postData.cover[2].url" />
      </div>
      <div class="info">
        {{ postData.user.nickname }}
        {{ postData.comment_length }}跟帖
      </div>
    </div>
    <div class="video" v-if="postData.type === 2 && postData.cover.length >= 1">
      <div class="title">{{ postData.title }}</div>
      <div class="coverWrapper">
        <img :src="postData.cover[0].url | fixImgUrl" alt="" />
        <div class="iconfont iconshipin"></div>
      </div>
      <div class="info">{{ postData.user.nickname }} {{ postData.comment_length }} 跟帖</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['postData']
}
</script>

<style lang="less" scoped>
.singleImg {
  display: flex;
  padding: 4.4444vw 2.7778vw;
  border-bottom: 1px solid #e4e4e4;
  .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
      font-size: 4.4444vw;
    }
    .info {
      font-size: 3.8889vw;
      color: #888;
    }
  }
  .right {
    width: 33.3333vw;
    height: 20.5556vw;
    object-fit: cover;
  }
}

.multiImg {
  padding: 4.4444vw 2.7778vw;
  border-bottom: 1px solid #e4e4e4;
  .title {
    font-size: 4.4444vw;
  }
  .imgs {
    display: flex;
    justify-content: space-between;
    padding: 1.1111vw 0 2.2222vw;
    img {
      width: 33%;
      height: 20.5556vw;
    }
  }
  .info {
    font-size: 3.8889vw;
    color: #888;
  }
}

.video {
  padding: 4.444vw 2.778vw;
  border-bottom: 1px solid #e4e4e4;
  .title {
    font-size: 4.444vw;
  }
  .coverWrapper {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    padding: 1.111vw 0 2.222vw;
    img {
      width: 100%;
      height: 47.222vw;
      object-fit: cover;
    }
    .iconshipin {
      position: absolute;
      font-size: 12.778vw;
      height: 12.778vw;
      line-height: 12.778vw;
      text-align: center;
      background: #aaa;
      color: #fff;
      border-radius: 50%;
    }
  }
  .info {
    font-size: 3.889vw;
    color: #888;
  }
}
</style>
